<!-- 我的页面 -->
<template>
  <div class="my-container">
    <van-cell-group class="my-info">
      <div v-if="userInfo">
        <van-cell
          :title="currentUser.name || '一直快乐的 Tom'"
          center
          :border="false"
        >
          <template #icon>
            <van-image width="66" height="66" round :src="currentUser.photo" />
          </template>
          <van-button size="mini" round to="/user/profile">编辑资料</van-button>
        </van-cell>

        <van-grid :border="false">
          <van-grid-item text="新闻">
            <template #icon>
              <span>{{ currentUser.art_count }} </span>
            </template>
          </van-grid-item>
          <van-grid-item text="关注">
            <template #icon>
              <span>{{ currentUser.follow_count }} </span>
            </template>
          </van-grid-item>
          <van-grid-item text="粉丝">
            <template #icon>
              <span>{{ currentUser.fans_count }}</span>
            </template>
          </van-grid-item>
          <van-grid-item text="获赞">
            <template #icon>
              <span>{{ currentUser.like_count }}</span>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 未登录时的样式 -->
      <div
        center
        v-else
        class="loginButton"
        @click="$router.push({ name: 'login', query: { redirect: '/my' } })"
      >
        <div class="mobile">
          <van-image
            round
            width="66"
            height="66"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <span>登录 | 注册</span>
      </div>
    </van-cell-group>

    <!-- 收藏-历史 -->
    <van-grid :column-num="2">
      <van-grid-item icon="star-o" text="收藏" />
      <van-grid-item icon="underway-o" text="历史" />
    </van-grid>

    <!-- 功能列表 -->
    <van-cell-group class="list">
      <van-cell v-if="userInfo" is-link title="消息通知" />
      <van-cell is-link title="智能助理" to="/user/chat" />
    </van-cell-group>

    <!-- 退出登录 -->
    <van-cell
      @click="offLogin"
      v-if="userInfo"
      class="offLogin"
      title="退出登录"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getCurrentUser } from "../../api/user";
export default {
  name: "My",
  data() {
    return {
      currentUser: {},
    };
  },
  methods: {
    // 退出登录
    offLogin() {
      this.$dialog
        .confirm({
          title: "退出",
          message: "确认退出吗?",
        })
        .then(() => {
          this.$store.commit("setUser", null);
        })
        .catch((err) => err);
    },
    /* 获取个人信息 */
    async loadCurrentUser() {
      try {
        if (this.userInfo) {
          const { data } = await getCurrentUser();
          this.currentUser = data.data;
        }
      } catch (err) {
        console.log(err.message);
      }
    },
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  created() {
    this.loadCurrentUser();
  },
};
</script>

<style lang= "less" scoped>
.my-container {
  .my-info {
    background: url("../../assets/banner.png") no-repeat;
    background-size: cover;
    height: 180px;
    .van-cell {
      box-sizing: border-box;
      padding-top: 38px;
      padding-bottom: 11px;
      background: none;
      color: white;
      font-size: 17px;
    }
    .van-image {
      margin-right: 15px;
      box-sizing: border-box;
      border: 1px solid white;
    }
    .van-button {
      height: 20px;
      line-height: 22px;
      font-size: 10px;
      color: #666666;
      padding: 0 10px;
    }

    /deep/.van-grid-item__content {
      font-size: 18px;
      height: 65px;
      color: white;
      border: none;
      background-color: transparent;
    }

    /deep/.van-grid-item__text {
      font-size: 11px;
      color: white;
    }
  }
}

.loginButton {
  height: 180px;
  display: flex;
  flex-flow: column nowrap;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  .mobile {
    padding-left: 13px;
    padding-bottom: 5px;
  }
}

/* 收藏和历史区域 */
/deep/.van-grid-item__icon {
  color: rgb(248, 116, 68) !important;
  font-size: 22px;
}
/deep/.van-icon-underway-o {
  color: orange !important;
}
/deep/.van-grid-item__text {
  font-size: 14px;
  color: #333333;
}

.list {
  margin: 5px 0;
}

.offLogin {
  text-align: center;
  color: red;
}
</style>